<template>
	<view class="adviser_counter">
		<!-- 搜索 -->
		<view class="search">
			<view class="input">
				<text style="font-size: 40rpx;font-weight: 600;">财顾</text>
				<view class="center">
					<u-icon name="search"></u-icon>
					<input type="text" value="" placeholder="投资怎么投" />
				</view>
				<u-icon name="plus" style="color:#ff7781 ; font-size: 40rpx;"></u-icon>
			</view>
		</view>
		<!-- 滑动模块 -->
		<view class="adviser_hua">
			<Huaswiper></Huaswiper>
		</view>
		<!-- tab切换 -->
		<view class="tab_qiehuan">
			<view class="bottom">
				<!-- 头部 -->
				<view class="navbar">
					<view v-for="(item, index) in navList" :key="index" class="bar "
						:class="tabCurrentIndex === index?'currn':'' " @click="tabClick(index)">
						{{ item.text }}
					</view>
				</view>
				<!-- 显示区域 -->
				<view class="list" v-for="(item, index) in navList" :key="index" v-if="tabCurrentIndex === index">
					<view class="list_itme" v-for="i in item.orderList" :key="i.id">
						<view class="top">
							<view class="left">
								<view class="img">
									<image :src="i.img" mode="widthFix"></image>
								</view>
								<view class="tt">
									<text>张丹</text>
									<text style="color: #c5c5c5;">美债精选</text>
								</view>
								<view class="rev">
									<text>认证大咖</text>
								</view>
							</view>
							<view class="right">
								<text>关注</text>
							</view>
						</view>
						<view class="seconde">
							<text>财顾早报：美债收益率飙升，冲击波何时休</text>
						</view>
						<view class="third">
							<text>1分钟了解板块风云，3分钟可知故事冷暖</text>
						</view>
						<view class="last">
							<view class="left">
								<text>刚刚</text>
								<text style="margin-left: 20rpx;">2点赞</text>
							</view>
							<view class="right">
								播报<u-icon name="play-right-fill" style="color: white;"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部导航栏 -->
		<u-tabbar :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import Huaswiper from '../../components/adviser/hua_swiper.vue'
	export default {
		components: {
			Huaswiper
		},
		data() {
			return {
				tabbar: '',
				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: '关注',
						orderList: [{
								id: 0,
								img: "../../static/iamges/CAT.png",
								name: "张丹",
								title: "美债精选",
								title1: "财顾早报：美债收益率飙升，冲击波何时休",
								title2: "1分钟了解板块风云，3分钟可知故事冷暖"
							},
							{
								id: 1,
								img: "../../static/iamges/CAT.png",
								name: "张丹",
								title: "美债精选",
								title1: "财顾早报：美债收益率飙升，冲击波何时休",
								title2: "1分钟了解板块风云，3分钟可知故事冷暖"
							},
							{
								id: 2,
								img: "../../static/iamges/CAT.png",
								name: "张丹",
								title: "美债精选",
								title1: "财顾早报：美债收益率飙升，冲击波何时休",
								title2: "1分钟了解板块风云，3分钟可知故事冷暖"
							},
							{
								id: 3,
								img: "../../static/iamges/CAT.png",
								name: "张丹",
								title: "美债精选",
								title1: "财顾早报：美债收益率飙升，冲击波何时休",
								title2: "1分钟了解板块风云，3分钟可知故事冷暖"
							},
							{
								id: 4,
								img: "../../static/iamges/CAT.png",
								name: "张丹",
								title: "美债精选",
								title1: "财顾早报：美债收益率飙升，冲击波何时休",
								title2: "1分钟了解板块风云，3分钟可知故事冷暖"
							},
							{
								id: 5,
								img: "../../static/iamges/CAT.png",
								name: "张丹",
								title: "美债精选",
								title1: "财顾早报：美债收益率飙升，冲击波何时休",
								title2: "1分钟了解板块风云，3分钟可知故事冷暖"
							},
							{
								id: 6,
								img: "../../static/iamges/CAT.png",
								name: "张丹",
								title: "美债精选",
								title1: "财顾早报：美债收益率飙升，冲击波何时休",
								title2: "1分钟了解板块风云，3分钟可知故事冷暖"
							},
						]
					},
					{
						state: 1,
						text: '推荐',
						orderList: [{
								id: 0,
								img: "../../static/iamges/CAT.png",
								name: "张丹",
								title: "美债精选",
								title1: "财顾早报：美债收益率飙升，冲击波何时休",
								title2: "1分钟了解板块风云，3分钟可知故事冷暖"
							},
							{
								id: 1,
								img: "../../static/iamges/CAT.png",
								name: "张丹",
								title: "美债精选",
								title1: "财顾早报：美债收益率飙升，冲击波何时休",
								title2: "1分钟了解板块风云，3分钟可知故事冷暖"
							},
							{
								id: 2,
								img: "../../static/iamges/CAT.png",
								name: "张丹",
								title: "美债精选",
								title1: "财顾早报：美债收益率飙升，冲击波何时休",
								title2: "1分钟了解板块风云，3分钟可知故事冷暖"
							},
						]
					},
					{
						state: 2,
						text: '带你投',
						orderList: [{
								id: 0,
								img: "../../static/iamges/CAT.png",
								name: "张丹",
								title: "美债精选",
								title1: "财顾早报：美债收益率飙升，冲击波何时休",
								title2: "1分钟了解板块风云，3分钟可知故事冷暖"
							},
							{
								id: 1,
								img: "../../static/iamges/CAT.png",
								name: "张丹",
								title: "美债精选",
								title1: "财顾早报：美债收益率飙升，冲击波何时休",
								title2: "1分钟了解板块风云，3分钟可知故事冷暖"
							},

						]
					},
					{
						state: 3,
						text: '大咖',
						orderList: [{
								id: 0,
								img: "../../static/iamges/CAT.png",
								name: "张丹",
								title: "美债精选",
								title1: "财顾早报：美债收益率飙升，冲击波何时休",
								title2: "1分钟了解板块风云，3分钟可知故事冷暖"
							},

						]
					},
					{
						state: 4,
						text: '视频',
						orderList: [{
								id: 0,
								img: "../../static/iamges/CAT.png",
								name: "张丹",
								title: "美债精选",
								title1: "财顾早报：美债收益率飙升，冲击波何时休",
								title2: "1分钟了解板块风云，3分钟可知故事冷暖"
							},

						]
					},
					{
						state: 4,
						text: '直播',
						orderList: [{
								id: 0,
								img: "../../static/iamges/CAT.png",
								name: "张丹",
								title: "美债精选",
								title1: "财顾早报：美债收益率飙升，冲击波何时休",
								title2: "1分钟了解板块风云，3分钟可知故事冷暖"
							},

						]
					}

				]
			}
		},
		methods: {
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},

			onLoad(options) {
				// 页面显示是默认选中第一个
				this.tabCurrentIndex = 1;
				/**
				 * 示例中为每个tabbar页面都写了一遍tabbar变量，您可以将tabbar数组写入到vuex中，这样可以全局引用
				 */
				this.tabbar = [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '借贷',
						count: 0,
						isDot: true,
						customIcon: false,
						pagePath: "/pages/lending/lending"
					},
					{
						iconPath: "red-packet",
						selectedIconPath: "red-packet-fill",
						text: '财富',
						customIcon: false,
						pagePath: "/pages/riches/riches"
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '首页',
						midButton: true,
						customIcon: false,
						pagePath: "/pages/index/index"
					},
					{
						iconPath: "bell",
						selectedIconPath: "bell-fill",
						text: '财顾',
						customIcon: false,
						pagePath: "/pages/adviser/adviser"
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: "/pages/mycenter/mycenter"
					},
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fafafa;
		box-sizing: border-box;
	}

	.adviser_counter {
		box-sizing: border-box;
		background-color: #fafafa;

		.search {
			background: #ffffff;
			padding: 15rpx 24rpx;
			/* #ifdef MP-WEIXIN */
			margin-top: 10rpx;

			/*  #endif */
			.input {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.center {
					//border: 1px solid red;
					width: 520rpx;
					border-radius: 35rpx;
					height: 70rpx;
					overflow: hidden;
					display: flex;
					align-items: center;
					padding: 0 24rpx;
					background-color: #fafafa;

					input {
						width: 90%;
						padding: 0 10rpx;
						//border: 1px solid black;
					}
				}
			}
		}

		.adviser_hua {
			padding: 0rpx 24rpx;
		}

		.tab_qiehuan {
			//border: 1px solid black;
			margin-top: 40rpx;
			padding: 0 24rpx;
              box-sizing: border-box;
			.bottom {

				//padding: 20rpx;
				.navbar {
					//border: 1px solid red;

					display: flex;

					.bar {
						font-size: 35rpx;
						margin-left: 30rpx;
                        padding: 5rpx 0;
						&:nth-child(1) {
							margin: 0;
						}

						&.currn {
							font-weight: bold;
							color: #ff4658;
							border-bottom: 2px solid #ff4658;
						}
					}
				}

				.list {
					  border-radius: 15rpx;
					  background-color: #ffffff;
					  margin-top: 30rpx;
                   .list_itme{
					     padding: 20rpx 24rpx;
					     border-bottom: 1px solid #f3f3f3;
					   .top {
					   	display: flex;
					   	justify-content: space-between;
					   
					   	.left {
					   		display: flex;
					   		justify-content: space-between;
					   		//border: 1px solid red;
					   		width: 400rpx;
					   
					   		.img {
					   			width: 130rpx;
					   			height: 130rpx;
					   			border-radius: 50%;
					   			border: 1px solid black;
					   			overflow: hidden;
								image{
									width: 130rpx;
								}
					   		}
					   
					   		.tt {
					   			display: flex;
					   			flex-direction: column;
					   			justify-content: space-around;
					   			margin-left: 23rpx;
					   		}
					   
					   		.rev {
					   			border-radius: 20rpx;
					   			padding: 10rpx 10rpx;
					   			background-color: #fff8f7;
					   			color: #ff623c;
					   			height: 60rpx;
					   		}
					   	}
					   
					   	.right {
					   		border-radius: 30rpx;
					   		color: #ff4558;
					   		border: 1px solid #ff4558;
					   		height: 50rpx;
					   		padding: 8rpx 30rpx;
					   		font-size: 24rpx;
					   	}
					   }
					   
					   .seconde {
					   	font-size: 32rpx;
					   	font-weight: 600;
					   	line-height: 80rpx;
					   }
					   
					   .third {
					   	font-size: 24rpx;
					   }
					   
					   .last {
					   	margin-top: 30rpx;
					   	display: flex;
					   	justify-content: space-between;
					   
					   	.left {
					   		font-size: 24rpx;
					   		padding: 10rpx 0rpx;
					   	}
					   
					   	.right {
					   		padding: 10rpx 30rpx;
					   		border-radius: 30rpx;
					   		background-color: #015dfb;
					   		color: #ffffff;
					   		font-size: 24rpx;
					   
					   		u-icon {
					   			color: #ffffff;
					   		}
					   	}
					   }
				   }

				}

			}
		}
	}
</style>
